<template>
  <div class="page">
    <v-card class="d-flex justify-center" max-width="344" style="margin:0 auto">
      <v-card-title class="d-flex justify-space-between">
        <span class>登录</span>
      </v-card-title>
      <v-card-text>
        <v-container>
          <v-form ref="form" v-model="valid" :lazy-validation="true">
            <v-text-field
              clearable
              dense
              outlined
              placeholder="请输入账号"
              :rules="rules.oldPass"
              v-model="form.username"
              required
            ></v-text-field>
            <v-text-field
              clearable
              dense
              outlined
              placeholder="请输入密码"
              :rules="rules.newPss"
              v-model="form.password"
              required
            ></v-text-field>
          </v-form>
        </v-container>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn :disabled="!valid" color="blue" class="mr-4" @click="submit">确认</v-btn>
      </v-card-actions>
    </v-card>
    <div style="font-size: 26px;margin: 20px 0;">Time is the most precious of all wealth</div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  data: () => ({
    menuState: false,
    showList: true,
    dialog: false,
    logoutState: false,
    valid: true,
    form: {
      username: "",
      password: "",
    },
    rules: {
      oldPass: [(v) => !!v || "账号不能为空"],
      newPss: [(v) => !!v || "密码不能为空"],
    },
    // 
    show2: false
  }),
  methods:{
    ...mapActions('admin/account', [
      'login'
    ]),
    validate() {
      this.$refs.form.validate();
    },
    submit () {
      const res = this.$refs.form.validate()
      if(res){
        this.login({
            username: this.form.username,
            password: this.form.password
          })
            .then(() => {
              // 重定向对象不存在则返回顶层路径
              this.$router.replace(this.$route.query.redirect || '/')
            })
      }
    }
  }
};
</script>

<style >
  .page{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
    align-content: center;
    justify-content: center;
}
</style>

